<template>
  <div class="app-container">
    <div class="filter-container">
      <label
        for="search"
        class="filter-item"
        style="font-size: 12px;"
      >
        标题名：
      </label>
      <el-input
        id="search"
        v-model="query.title"
        size="mini"
        clearable
        placeholder="请输入标题名"
        style="width: 200px;margin-right: 10px"
        class="filter-item"
        @keyup.enter.native="getList"
      />
      <el-button
        size="mini"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="getList"
      >查询
      </el-button>
      <el-button
        size="mini"
        type="primary"
        style="margin-left: 5px"
        icon="el-icon-plus"
        class="filter-item"
        @click="addDialog"
      >新增
      </el-button>
    </div>
    <notify-table
      :list="list"
      :loading="loading"
      :total="total"
      :query="query"
      style="width: 1020px;"
      @edit="edit"
      @reload="getList"
    />

    <el-dialog :visible.sync="dialog" :title="title" :width="'650px'">
      <notify-dialog
        :form="form"
        @close="dialog = false"
        @reload="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import NotifyTable from './module/notifyTable'
import NotifyDialog from './module/notifyDialog'
import { parseTime } from '../../utils'
import { fetchNotifyList } from '../../api/notify'
export default {
  name: 'Notify',
  components: { NotifyDialog, NotifyTable },
  data() {
    return {
      loading: true,
      dialog: false,
      title: '',
      total: 0,
      list: [],
      query: {
        page: 1,
        limit: 20,
        title: null,
        sort: '+id'
      },
      form: {
        id: null,
        title: '',
        content: '',
        link: null,
        author: null,
        time: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.query.page = 1
      this.loading = true
      fetchNotifyList(this.query).then(response => {
        this.$SUCCESS('获取通知列表成功')
        if (response.data.total !== 0) {
          this.list = response.data.items
          for (const i in this.list) {
            this.list[i].num = parseInt(i) + 1
          }
          this.total = response.data.total
        } else {
          this.list = []
        }
        this.loading = false
      }).catch(() => {
        this.$ERROR('获取通知列表失败')
        this.loading = false
      })
    },
    resetForm() {
      this.form = this.$options.data().form
    },
    edit(item) {
      this.resetForm()
      this.$setDialog(true, '通知设置', true)
      const object = JSON.parse(JSON.stringify(item))
      this.form = {
        id: object.id,
        title: object.title,
        content: object.content,
        link: object.link,
        author: object.from,
        time: [
          parseTime(object.startTime,'{y}-{m}-{d} {h}:{i}:{s}'),
          parseTime(object.endTime,'{y}-{m}-{d} {h}:{i}:{s}')
        ]
      }
    },
    addDialog() {
      this.resetForm()
      this.$setDialog(true, '新增通知', false)
    }
  }
}
</script>

<style scoped>

</style>
